<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Space Radar</title>
</head>
<body>

<script>
    var d3 = require('d3')
</script>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/throbber.css" type="text/css">
<link rel="stylesheet" href="css/breadcrumb.css" type="text/css">
<link rel="stylesheet" href="node_modules/photon/dist/css/photon.css">

<div class="window" id="photon-window">

    <!--头部菜单Start-->
    <header class="toolbar toolbar-header">
        <h1 class="title">Space Radar</h1>

        <div class="toolbar-actions">
            <button class="btn btn-default btn-large" onclick="newWindow()">
                <span class="icon icon-popup icon-text"></span>
                Open
            </button>

            <div class="btn-group">
                <button class="btn btn-default btn-large" onclick="scanRoot()">
                    <span class="icon icon-drive icon-text"></span>
                    Scan Drive
                </button>

                <button class="btn btn-default btn-large" onclick="scanFolder()">
                    <span class="icon icon-folder icon-text"></span>
                    Scan Folder
                </button>

                <button class="btn btn-default btn-large" onclick="readFile()">
                    <span class="icon icon-folder icon-text"></span>
                    Read file
                </button>

                <button class="btn btn-default btn-large" onclick="scanMemory()">
                    <span class="icon icon-target icon-text"></span>
                    Scan Memory
                </button>

                <!--
                TODO
                <button class="btn btn-default btn-large">
                  <span class="icon icon-archive icon-text"></span>
                  Root
                </button>

                <button class="btn btn-default btn-large">
                  <span class="icon icon-home icon-text"></span>
                  Home
                </button>

                <button class="btn btn-default btn-large">
                  <span class="icon icon-picture icon-text"></span>
                  Photos
                </button>
                -->
            </div>

            <div class="btn-group">
                <button class="btn btn-default btn-large" onclick="graphPlugin.showLess()">
                    <span class="icon icon-minus"></span>
                    <!-- Show Less -->
                </button>
                <!-- icon-text -->
                <!-- icon-down-circled icon-up-circled icon-down icon-progress-2 icon-progress-1 -squared -circled -->
                <button class="btn btn-default btn-large" onclick="graphPlugin.showMore()">
                    <span class="icon icon-plus"></span>
                    <!-- Show More -->
                </button>
            </div>

            <button class="btn btn-default btn-large" onclick="graphPlugin.navigateUp()">
                <span class="icon icon-up-circled"></span>
            </button>


            <!--       <button class="btn btn-default btn-dropdown pull-right btn-large">
                    <span class="icon icon-cd"></span>
                  </button> -->

            <!-- Large button group -->
            <div class="btn-group pull-right">
                <button class="btn btn-large btn-default active" id="sunburst_button" onclick="showSunburst()">
                    <span class="icon icon-cd"></span> <!-- icon-cd  icon-chart-pie icon-database icon-rss"-->
                </button>

                <button class="btn btn-default btn-large" id="treemap_button" onclick="showTreemap()">
                    <span class="icon icon-layout"></span> <!-- icon-map  icon-layout icon-sweden -->
                </button>
            </div>
            <div></div> <!-- thin padding -->
        </div>
    </header>
    <!--头部菜单End-->

    <!--中间主窗口区域Start-->
    <div class="window-content" style="overflow-y: hidden;">

        <!--指导弹窗-->
        <div id="shades" class="Aligner">
            <div class="Aligner-item">
                <div id="promptbox">
                    <h4>Scan</h4>
                    <p>
                        You may drag a folder here to scan the its contents, or pick one of the following.
                    </p>
                    <div class="">
                        <button class="btn btn-default btn-large" onclick="scanRoot()">
                            <span class="icon icon-drive icon-text"></span>
                            Scan Drive
                        </button>
                        <button class="btn btn-default btn-large" onclick="scanFolder()">
                            <span class="icon icon-folder icon-text"></span>
                            Scan Folder
                        </button>
                        <br \>
                        <button class="btn btn-default btn-large" onclick="readFile()">
                            <span class="icon icon-folder icon-text"></span>
                            Read file
                        </button>
                        <button class="btn btn-default btn-large" onclick="scanMemory()">
                            <span class="icon icon-target icon-text"></span>
                            Scan Memory
                        </button>
                    </div>

                </div>
            </div>
        </div>

        <canvas id="canvas"></canvas>

        <!--画图区域-->
        <div class="svg-container">
        </div>

        <!--加载动画Loading-->
        <div id="loading">
            Refreshing...
            <div class="throbber-loader">
                Loading…
            </div>
        </div>
        <!--检索信息提示-->
        <div id="legend">
        </div>

        <div id="explanation">
            <span id="core_top"></span><br/>
            <span id="core_center"></span><br/>
            <span id="core_tag"></span>
        </div>


        <div id="sequence">
            <div class="breadcrumb flat">
            </div>
        </div>


    </div>
    <!-- 中间主窗口区域End-->

    <!--底部的区域Start-->
    <footer class="toolbar toolbar-footer">
        <div class="toolbar-actions">
            <div class="btn-group">
                <button class="btn btn-default" onclick="navigateBack()">
                    <span class="icon icon-left-bold"></span>
                    <!-- icon-left-bold icon-left-circled icon-left -->
                </button>
                <button class="btn btn-default" onclick="navigateForward()">
                    <span class="icon icon-right-bold"></span>
                </button>
            </div>

            <span id="bottom_status" style="font-size:11px; padding-left: 8px"><!-- Welcome to Space Radar --></span>
            <button class="btn btn-default pull-right" id="dir_opener" onclick="openDirectory()">Locate Directory
            </button>

            <!--
            TODO
            <button class="btn btn-default">Default</button>
            <button class="btn btn-primary">Primary</button>
            <button class="btn btn-positive">Positive</button>
            <button class="btn btn-negative">Negative</button>
            <button class="btn btn-warning">Warning</button>


            <button class="btn btn-default pull-right">
              Cancel
            </button>

            <button class="btn btn-primary pull-right">
              Kill Process
            </button>
         -->
        </div>
    </footer>
    <!--底部的区域End-->
</div>

<script src="js/utils.js"></script>
<script src="js/mem.js"></script>
<script src="js/graphs.js"></script>

<script src="js/sunburst.js"></script>
<script src="js/treemap.js"></script>
<script src="js/radar.js"></script>
<script src="js/menu.js"></script>
<script src="js/breadcrumbs.js"></script>

</body>
</html>
